<script setup lang="ts">
import { Menu, Button, Tabs, TabPane } from 'ant-design-vue'

import SpecializedItem from '@/components/SpecializedItem.vue'
import FooterItem from '@/components/FooterItem.vue'
import ZhuosuGou from './components/ZhuosuGou.vue'
import ZhuosuXin from './components/ZhuosuXin.vue'
import ZhuosuPai from './components/ZhuosuPai.vue'
import Zsr from '@/components/Zsr.vue'
import Zsd from '@/components/Zsd.vue'
import Zsl from '@/components/Zsl.vue'

import { ref } from 'vue'
import type { MenuProps } from 'ant-design-vue'
import router from '@/router'
const current = ref<string[]>(['homepage'])
const items = ref<MenuProps['items']>([
  {
    key: 'homepage',
    label: '首页',
    title: 'Navigation One22',
  },
  {
    key: 'purchase',
    label: '卓速采',
    title: 'Navigation One22',
  },
  {
    key: 'shopping',
    label: '卓速购',
    title: 'Navigation Two',
  },
  {
    key: 'financing',
    label: '卓速融',
    title: 'Navigation Two',
  },

  {
    key: 'auction',
    label: '卓速拍',
    title: 'Navigation Two',
  },
  {
    key: 'lease',
    label: '卓速赁',
    title: 'Navigation Two',
  },
  {
    key: 'da',
    label: '卓速达',
    title: 'Navigation Two',
  },
  {
    key: 'investigation',
    label: '卓速信',
    title: 'Navigation Two',
  },
])

const menuClick: MenuProps['onClick'] = ({ key }) => {
  router.push({ path: '/', hash: `#${key}` })
}

const activeKey = ref<string>('1')

// 招标类型
const biddingType = ref<string>('engineering')

const biddingTypeChange = (value: string) => {
  biddingType.value = value
}

const listData = ref([
  {
    name: '沂源高新技术产业园发展有限公司第三污水处理厂项目招标公告',
    time: '2017-02-08',
    isAnnouncement: true,
  },
  {
    name: '菏宝高速公路长垣至新乡段2025-2026年日常养护项目招标公告',
    time: '2017-02-08',
    isAnnouncement: false,
  },
  {
    name: '毅康科技蒙城项目2025-2026年度日常养护（二次招标）项目公告',
    time: '2017-02-08',
    isAnnouncement: false,
  },
  {
    name: '济南至临清高速公路齐河至临清段房建工程施工招标公告',
    time: '2017-02-08',
    isAnnouncement: false,
  },
  {
    name: '济南至东阿高速公路齐河至东阿段房建工程施工招标公告',
    time: '2017-02-08',
    isAnnouncement: false,
  },
  {
    name: '菏宝高速公路长垣至新乡段2025-2026年日常养护项目招标公告',
    time: '2017-02-08',
    isAnnouncement: false,
  },
])

const gouView = () => {
  window.open('http://60.208.93.179:8001/login')
}
const caiView = () => {
  window.open('http://10.166.134.165:8036/商城原型设计/招标采购平台.html')
}
const xinView = () => {
  window.open('http://zb.sdhsg.com/category/SupplierDishonestylist')
}
const paiView = () => {
  window.open('http://zb.sdhsg.com/category/disposalOfWasteMaterials')
}

const linView = () => {
  window.open('http://zb.sdhsg.com/category/investmentAndLeasing')
}
const daView = () => {
  // window.open('http://60.208.93.179:8001/login')
}
const rongView = () => {
  // window.open('http://60.208.93.179:8001/login')
}

const handleLogin = () => {
  window.location.href = `https://tuser.sdhsg.com/idp/oauth2/authorize?response_type=code&state=1&redirect_uri=${window.location.href}&client_id=SCCP`
}
</script>

<template>
  <div class="home-view">
    <div class="homepage-carousel" id="homepage">
      <div class="homepage-carousel-header flex items-center justify-between">
        <div class="flex items-center gap-0.5 justify-center">
          <img class="w-[47px] h-[47px]" src="../assets/image/logo.png" alt="" />
          <div class="homepage-carousel-header-title">卓速汇</div>
        </div>
        <!--        导航菜单-->
        <div class="top-nav-bar">
          <Menu
            v-model:selectedKeys="current"
            mode="horizontal"
            :items="items"
            @click="menuClick"
          />
          <Button
            type="primary"
            style="background: #5c89c1; border: 1px solid #ffffff"
            class="mr-[16px]"
            >立即注册</Button
          >
          <Button style="color: #2172ba" @click="handleLogin">登录</Button>
        </div>
      </div>
      <div class="tool-gif-container">
        <div class="homepage-title">
          <h1 class="text-[48px] m-[0]">供应链综合管控平台</h1>
          <h4 class="text-[24px] mt-[14px]">链接产业、赋能企业，驱动高效与可持续发展。</h4>
        </div>
        <div class="tool-gif"></div>
      </div>
      <div class="left-and-right-operation">
        <div class="left-op cursor-pointer"></div>
        <div class="right-op cursor-pointer"></div>
      </div>
    </div>
    <div class="homepage-carousel-content">
      <SpecializedItem title="卓速采" id="purchase" @view="caiView">
        <div class="flex gap-[16px] h-[600px]">
          <div class="w-[277px] left-nav">
            <div class="nav-header">招标专区</div>
            <div
              class="basic"
              :class="{ 'basic-active': biddingType === 'engineering' }"
              @click="biddingTypeChange('engineering')"
            >
              工程类
            </div>
            <div
              class="basic"
              :class="{ 'basic-active': biddingType === 'goods' }"
              @click="biddingTypeChange('goods')"
            >
              货物类
            </div>
            <div
              class="basic"
              :class="{ 'basic-active': biddingType === 'service' }"
              @click="biddingTypeChange('service')"
            >
              服务类
            </div>
          </div>
          <div style="width: calc(100% - 277px)" class="right-tabs">
            <div>
              <Tabs v-model:activeKey="activeKey" centered :disabled="true">
                <TabPane key="1" tab="招标公告">
                  <div class="h-[532px] bidding-announcement flex flex-col">
                    <div class="flex gap-[16px] items-center bidding-announcement-top">
                      <div style="flex: 3" class="pl-[24px]">公告名称</div>
                      <div class="text-center w-[86px]">状态</div>
                      <div style="flex: 1" class="text-center">截止时间</div>
                    </div>
                    <div
                      class="flex gap-[16px] items-center h-[56px]"
                      v-for="(item, index) in listData"
                      :key="index"
                    >
                      <div style="flex: 3" class="pl-[24px] font-16">{{ item.name }}</div>
                      <div
                        class="text-center font-18"
                        :class="{ announcement: item.isAnnouncement, end: !item.isAnnouncement }"
                      >
                        {{ item.isAnnouncement ? '公告中' : '已结束' }}
                      </div>
                      <div style="flex: 1" class="text-center font-16">{{ item.time }}</div>
                    </div>
                  </div>
                </TabPane>
                <TabPane key="2" tab="补充公告" force-render>
                  <div class="h-[532px] bidding-announcement flex flex-col">
                    <div class="flex gap-[16px] items-center bidding-announcement-top">
                      <div style="flex: 3" class="pl-[24px]">公告名称</div>
                      <div class="text-center w-[86px]">状态</div>
                      <div style="flex: 1" class="text-center">截止时间</div>
                    </div>
                    <div
                      class="flex gap-[16px] items-center h-[56px]"
                      v-for="(item, index) in listData"
                      :key="index"
                    >
                      <div style="flex: 3" class="pl-[24px] font-16">{{ item.name }}</div>
                      <div
                        class="text-center font-18"
                        :class="{ announcement: item.isAnnouncement, end: !item.isAnnouncement }"
                      >
                        {{ item.isAnnouncement ? '公告中' : '已结束' }}
                      </div>
                      <div style="flex: 1" class="text-center font-16">{{ item.time }}</div>
                    </div>
                  </div>
                </TabPane>
                <TabPane key="3" tab="中标候选人公示">
                  <div class="h-[532px] bidding-announcement flex flex-col">
                    <div class="flex gap-[16px] items-center bidding-announcement-top">
                      <div style="flex: 3" class="pl-[24px]">公告名称</div>
                      <div class="text-center w-[86px]">状态</div>
                      <div style="flex: 1" class="text-center">截止时间</div>
                    </div>
                    <div
                      class="flex gap-[16px] items-center h-[56px]"
                      v-for="(item, index) in listData"
                      :key="index"
                    >
                      <div style="flex: 3" class="pl-[24px] font-16">{{ item.name }}</div>
                      <div
                        class="text-center font-18"
                        :class="{ announcement: item.isAnnouncement, end: !item.isAnnouncement }"
                      >
                        {{ item.isAnnouncement ? '公告中' : '已结束' }}
                      </div>
                      <div style="flex: 1" class="text-center font-16">{{ item.time }}</div>
                    </div>
                  </div>
                </TabPane>
                <TabPane key="4" tab="流标公示">
                  <div class="h-[532px] bidding-announcement flex flex-col">
                    <div class="flex gap-[16px] items-center bidding-announcement-top">
                      <div style="flex: 3" class="pl-[24px]">公告名称</div>
                      <div class="text-center w-[86px]">状态</div>
                      <div style="flex: 1" class="text-center">截止时间</div>
                    </div>
                    <div
                      class="flex gap-[16px] items-center h-[56px]"
                      v-for="(item, index) in listData"
                      :key="index"
                    >
                      <div style="flex: 3" class="pl-[24px] font-16">{{ item.name }}</div>
                      <div
                        class="text-center font-18"
                        :class="{ announcement: item.isAnnouncement, end: !item.isAnnouncement }"
                      >
                        {{ item.isAnnouncement ? '公告中' : '已结束' }}
                      </div>
                      <div style="flex: 1" class="text-center font-16">{{ item.time }}</div>
                    </div>
                  </div>
                </TabPane>
                <TabPane key="5" tab="中标结果展示">
                  <div class="h-[532px] bidding-announcement flex flex-col">
                    <div class="flex gap-[16px] items-center bidding-announcement-top">
                      <div style="flex: 3" class="pl-[24px]">公告名称</div>
                      <div class="text-center w-[86px]">状态</div>
                      <div style="flex: 1" class="text-center">截止时间</div>
                    </div>
                    <div
                      class="flex gap-[16px] items-center h-[56px]"
                      v-for="(item, index) in listData"
                      :key="index"
                    >
                      <div style="flex: 3" class="pl-[24px] font-16">{{ item.name }}</div>
                      <div
                        class="text-center font-18"
                        :class="{ announcement: item.isAnnouncement, end: !item.isAnnouncement }"
                      >
                        {{ item.isAnnouncement ? '公告中' : '已结束' }}
                      </div>
                      <div style="flex: 1" class="text-center font-16">{{ item.time }}</div>
                    </div>
                  </div>
                </TabPane>
              </Tabs>
            </div>
            <div></div>
          </div>
        </div>
      </SpecializedItem>
      <SpecializedItem title="卓速购" id="shopping" background-color="#EFF5FA" @view="gouView">
        <ZhuosuGou></ZhuosuGou>
      </SpecializedItem>
      <SpecializedItem title="卓速融" id="financing" @view="rongView">
        <Zsr />
      </SpecializedItem>

      <SpecializedItem title="卓速拍" id="auction" background-color="#EFF5FA" @view="paiView">
        <ZhuosuPai></ZhuosuPai>
      </SpecializedItem>
      <SpecializedItem title="卓速赁" id="lease" @view="linView">
        <Zsl />
      </SpecializedItem>
      <SpecializedItem title="卓速达" background-color="#EFF5FA" id="da" @view="daView">
        <Zsd />
      </SpecializedItem>
      <SpecializedItem title="卓速信" id="investigation" @view="xinView">
        <ZhuosuXin />
      </SpecializedItem>
    </div>
    <div class="home-view-footer">
      <div
        style="height: calc(100% - 48px)"
        class="container flex items-center justify-between gap-[120px]"
      >
        <FooterItem title="卓速汇">
          <div class="w-[413px] font-center">
            致力于通过数字化技术推动供应链产业升级，构建
            智能、高效、绿色的供应链生态体系。七大核心模
            块覆盖供应链全流程，为企业提供一站式数字化解决方案。
          </div>
        </FooterItem>
        <FooterItem title="联系方式">
          <div class="flex flex-col gap-[15px] font-center">
            <div>电话：<span>400-666-8888</span></div>
            <div>邮箱：<span>service@shange.com</span></div>
            <div>地址：<span>济南市历下区龙奥北路8号</span></div>
          </div>
        </FooterItem>
        <FooterItem title="帮助中心">
          <ul class="grid grid-cols-2 gap-[10px] items-center font-center">
            <li class="cursor-pointer">卓速采</li>
            <li class="cursor-pointer">卓速购</li>
            <li class="cursor-pointer">卓速信</li>
            <li class="cursor-pointer">卓速拍</li>
            <li class="cursor-pointer">卓速赁</li>
            <li class="cursor-pointer">卓速达</li>
            <li class="cursor-pointer">卓速融</li>
          </ul>
        </FooterItem>
        <div class="flex flex-col gap-[10px]">
          <img src="../assets/image/qrCode.png" alt="" />
          <div class="qr-title">微信公众号</div>
        </div>
      </div>
      <div class="copyright h-[48px] w-full flex items-center justify-center">
        <div class="copyright-content">Copyright © 2023 山高e购 All Rights Reserved.</div>
      </div>

      <!--      背景     -->
      <div class="footer-big absolute left-[-2%] top-[39%]"></div>
      <div class="footer-small absolute left-[10%] top-[50%]"></div>
      <div class="footer-big absolute left-[28%] top-[76%]"></div>
      <div class="footer-small absolute left-[40%] top-[85%]"></div>
      <div class="footer-big absolute right-[1%] top-[52%]"></div>
      <div class="footer-small absolute right-[-1%] top-[58%]"></div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.home-view {
  width: 100%;
  height: 100%;

  .nav-header {
    background-image: url('../assets/image/caiBg.png');
    background-size: 100% 100%;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    width: 100%;
    height: 80px;
    line-height: 80px;
    padding-left: 25px;
  }

  .basic {
    width: 100%;
    height: 80px;
    line-height: 80px;
    padding-left: 25px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    font-feature-settings: 'kern' on;
    color: #333333;
    cursor: pointer;
  }

  .pai {
    background-image: url('../assets/image/pai.png');
    background-size: 100% 100%;
  }

  .basic-active {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 83%);
    font-size: 20px;
    font-weight: bold;
    /* 蓝色 */
    color: #0973ca;
    position: relative;
    cursor: pointer;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 5px;
      height: 34px;
      opacity: 1;
      background: #0973ca;
    }
  }

  .left-nav {
    background: #dff0ff;
  }

  .right-tabs {
    :deep(.ant-tabs-nav-list) {
      width: 100%;
    }

    :deep(.ant-tabs-tab-active) {
      font-size: 20px;
      font-weight: bold;
      /* 蓝色 */
      color: #0973ca !important;
    }
    :deep(.ant-tabs-tab-btn) {
      font-size: 20px;
      font-weight: 500;
      line-height: normal;
      color: rgba(33, 114, 186, 0.65);
    }

    :deep(.ant-tabs-tab) {
      flex: 1;
      margin: 0;
      justify-content: center;
    }
  }

  .homepage-carousel-content {
    .bidding-announcement {
      overflow: hidden;
      border-radius: 10px;
      opacity: 1;
      background: linear-gradient(180deg, #dff0ff 0%, #f6faff 100%);

      &-top {
        height: 56px;
        border-radius: 10px;
        background: #d0e7fa;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0;
        color: #666666;
      }

      .announcement {
        color: #ffffff;
        width: 86px;
        height: 34px;
        border-radius: 4px;
        opacity: 1;
        /* 自动布局 */
        display: flex;
        flex-direction: column;
        padding: 4px 16px;
        /* 蓝色渐变 */
        background: linear-gradient(270deg, #2c91eb 0%, #0973ca 100%);
      }
      .end {
        color: #ffffff;
        width: 86px;
        height: 34px;
        border-radius: 4px;
        opacity: 1;

        /* 自动布局 */
        display: flex;
        flex-direction: column;
        padding: 4px 16px;

        background: linear-gradient(270deg, #cacaca 0%, #929292 100%);
      }
    }
  }

  .homepage-carousel {
    width: 100%;
    height: 100%;
    background-image: url('../assets/image/HomeBackground.png');
    background-size: 100% 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    .homepage-title {
      position: absolute;
      color: white;
      top: 22%;
    }

    @media screen and (min-width: 1601px) and (max-width: 2560px)  {
      &-header {
        width: 1400px;
        min-width: 1400px;
        margin-top: 36px;

        &-title {
          color: #ffffff;
          font-size: clamp(16px, 4vw, 28px);
        }

        .top-nav-bar {
          display: flex;
          align-items: center;

          :deep(.ant-menu-horizontal) {
            border-bottom: transparent;
          }

          :deep(.ant-menu-light) {
            background: transparent;
          }
          :deep(.ant-menu-item-selected) {
            color: white;
          }
          :deep(.ant-menu-title-content) {
            color: white;
            font-size: clamp(16px, 4vw, 18px);
          }
          :deep(.ant-menu-item:hover::after) {
            border-bottom-color: transparent;
          }
          :deep(.ant-menu-item-selected::after) {
            border-bottom-color: #ffffff !important;
          }
        }
      }
    }

    @media screen and (max-width: 1600px) {
      &-header {
        width: 1200px;
        min-width: 1200px;
        margin-top: 36px;

        &-title {
          color: #ffffff;
          font-size: clamp(16px, 4vw, 28px);
        }

        .top-nav-bar {
          display: flex;
          align-items: center;

          :deep(.ant-menu-horizontal) {
            border-bottom: transparent;
          }

          :deep(.ant-menu-light) {
            background: transparent;
          }
          :deep(.ant-menu-item-selected) {
            color: white;
          }
          :deep(.ant-menu-title-content) {
            color: white;
            font-size: clamp(16px, 4vw, 18px);
          }
          :deep(.ant-menu-item:hover::after) {
            border-bottom-color: transparent;
          }
          :deep(.ant-menu-item-selected::after) {
            border-bottom-color: #ffffff !important;
          }
        }
      }
    }

    @media screen and (min-width: 2560px) {
      &-header {
        width: 1800px;
        min-width: 1800px;
        margin-top: 36px;

        &-title {
          color: #ffffff;
          font-size: clamp(16px, 4vw, 28px);
        }

        .top-nav-bar {
          display: flex;
          align-items: center;

          :deep(.ant-menu-horizontal) {
            border-bottom: transparent;
          }

          :deep(.ant-menu-light) {
            background: transparent;
          }
          :deep(.ant-menu-item-selected) {
            color: white;
          }
          :deep(.ant-menu-title-content) {
            color: white;
            font-size: clamp(16px, 4vw, 18px);
          }
          :deep(.ant-menu-item:hover::after) {
            border-bottom-color: transparent;
          }
          :deep(.ant-menu-item-selected::after) {
            border-bottom-color: #ffffff !important;
          }
        }
      }
    }

    @media screen and (min-width: 1601px) and (max-width: 2560px) {
      .tool-gif-container {
        width: 1400px;
        min-width: 1400px;
        height: calc(100% - 47px - 36px);
        position: relative;

        .tool-gif {
          position: absolute;
          right: -2%;
          top: 50%;
          width: 600px;
          aspect-ratio: 1/1.0378048780487805;
          background-image: url(/src/assets/image/tool.gif);
          background-size: 100% 100%;
          -o-object-fit: cover;
          object-fit: cover;
          transform: translateY(-50%);
          filter: blur(1px);
        }
      }
    }

    @media screen and (max-width: 1600px) {
      .tool-gif-container {
        width: 1200px;
        min-width: 1200px;
        height: calc(100% - 47px - 36px);
        position: relative;

        .tool-gif {
          position: absolute;
          right: -2%;
          top: 50%;
          width: 500px;
          aspect-ratio: 1/1.0378048780487805;
          background-image: url(/src/assets/image/tool.gif);
          background-size: 100% 100%;
          -o-object-fit: cover;
          object-fit: cover;
          transform: translateY(-50%);
          filter: blur(1px);
        }
      }
    }

    @media screen and (min-width: 2560px) {
      .tool-gif-container {
        width: 1800px;
        min-width: 1800px;
        height: calc(100% - 47px - 36px);
        position: relative;

        .tool-gif {
          position: absolute;
          right: -2%;
          top: 50%;
          width: 820px;
          aspect-ratio: 1/1.0378048780487805;
          background-image: url(/src/assets/image/tool.gif);
          background-size: 100% 100%;
          -o-object-fit: cover;
          object-fit: cover;
          transform: translateY(-50%);
          filter: blur(1px);
        }
      }
    }

    .left-and-right-operation {
      right: 0;
      left: 0;
      position: absolute;
      top: 50%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transform: translateY(-50%);
      .left-op {
        width: 120px;
        height: 120px;
        background-image: url('../assets/image/leftOp.png');
        background-size: 100% 100%;
      }

      .right-op {
        width: 120px;
        height: 120px;
        background-image: url('../assets/image/rightOp.png');
        background-size: 100% 100%;
      }
    }
  }

  .home-view-footer {
    position: relative;
    width: 100%;
    height: 339px;
    border-radius: 4px;
    /* 蓝色渐变 */
    background: linear-gradient(270deg, #2c91eb 0%, #0973ca 100%);
    overflow: hidden;

    .copyright {
      background-color: #356bad;
      .copyright-content {
        font-size: 18px;
        font-weight: normal;
        line-height: normal;
        text-align: center;
        letter-spacing: 0;
        font-feature-settings: 'kern' on;
        background: linear-gradient(180deg, #ffffff 0%, #ecf7f0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    .footer-big {
      position: absolute;
      width: 333.26px;
      height: 334.25px;
      transform: rotate(45deg);
      border-radius: 20px;
      opacity: 1;
      background: linear-gradient(137deg, rgba(255, 255, 255, 0.05) 2%, rgba(255, 255, 255, 0) 53%);
    }

    .footer-small {
      position: absolute;
      width: 186.18px;
      height: 187.17px;
      transform: rotate(45deg);
      border-radius: 20px;
      opacity: 1;
      background: linear-gradient(137deg, rgba(255, 255, 255, 0.05) 2%, rgba(255, 255, 255, 0) 53%);
    }

    .qr-title {
      letter-spacing: 2px;
      font-size: 18px;
      font-weight: normal;
      line-height: normal;
      text-align: center;
      font-feature-settings: 'kern' on;
      background: linear-gradient(180deg, #ffffff 0%, #ecf7f0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .font-center {
      font-size: 18px;
      font-weight: normal;
      line-height: 40px;
      font-feature-settings: 'kern' on;
      background: linear-gradient(180deg, #ffffff 0%, #ecf7f0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }
}
</style>
